<script setup>
import qrCode from "../assets/refill/qrcode.png";
import copy from "../assets/refill/copy.png";
import { http } from "../services/service";
import { useUserStore } from "../store/index";
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useI18n } from "vue-i18n";

const i18nUse = useI18n();
const router = useRouter();
const store = useUserStore();

const route = useRoute();
const back = () => {
  router.go(-1);
};
const info = ref();
const address = ref("");
const comment = ref("");
const withdrawAmount = ref("");

const getRefill = () => {
  http
    .get(`/api/v1/center/recharge?telegramId=${store.getUser?.telegramId}`)
    .then(
      (response) => {
        info.value = response?.data?.data;
        qrCodeValue.value = info.value?.rechargeAddress;
        address.value = info.value?.rechargeAddress;
        comment.value = info.value?.rechargeCode;
        withdrawAmount.value = info.value?.rechargeMinAmount;
      },
      () => {}
    );
};
getRefill();

const copyTo = (value) => {
  const input = document.createElement("input");
  input.value = value;
  document.body.appendChild(input);
  input.select();
  document.execCommand("copy");
  document.body.removeChild(input);
  showToast({
    message: i18nUse.t("copySuccess"),
  });
};
const qrCodeValue = ref("");
</script>

<template>
  <div class="container">
    <div class="title">
      <van-icon
        name="arrow-left"
        class="icon-left"
        size="25"
        @click="back()"
      />{{ $t("Recharge") }}
    </div>
    <div class="qr-code">
      <vue-qrcode :value="qrCodeValue"></vue-qrcode>
    </div>
    <div class="withDraw">
      <div
        style="
          display: flex;
          justify-content: space-between;
          align-items: center;
        "
      >
        <span style="color: #c8c9cc"> {{ $t("refill_adress") }}: </span>
        <span style="font-size: 9px; white-space: nowrap; width: 80%">
          {{ info?.rechargeAddress }}
        </span>
        <van-icon
          :name="copy"
          size="20"
          class="icon-right"
          @click="copyTo(info?.rechargeAddress)"
        />
      </div>
      <div
        style="
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 20px;
        "
      >
        <span style="color: #c8c9cc"> Comment: </span>
        <span style="padding-right: 20px" class="content">
          {{ info?.rechargeCode }}
        </span>
        <van-icon
          :name="copy"
          size="20"
          class="icon-right"
          @click="copyTo(info?.rechargeCode)"
        />
      </div>
      <div
        style="
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 20px;
        "
      >
        <span style="color: #c8c9cc">{{ $t("refill_num") }}:</span>
        <span style="padding-right: 20px" class="content">{{
          info?.rechargeMinAmount
        }}</span>
      </div>
    </div>
    <!-- <div class="qr-number">
      <span style="display: inline-block;width: 140px;">{{ $t("refill_adress") }}</span>
      <span style="display: inline-block;overflow: hidden;white-space: nowrap;padding-left:10px;text-overflow: ellipsis;">{{ info?.rechargeAddress }}</span>
      <van-icon
        :name="copy"
        size="20"
        class="icon-right"
        @click="copyTo(info?.rechargeAddress)"
      />
    </div>
    <div class="qr-number">
      <span>Comment</span>
      <span>{{ info?.rechargeCode }}</span>
      <van-icon
        :name="copy"
        size="20"
        class="icon-right"
        @click="copyTo(info?.rechargeCode)"
      />
    </div>
    <div class="qr-number">
      <span>{{ $t("refill_num") }}</span>
      <span>{{ info?.rechargeMinAmount }}</span>
      
    </div> -->
    <div class="text-container">{{ $t("rechargeDes") }}</div>
    <div class="text-container" v-html="$t('rechargeTxt')"></div>
  </div>
</template>

<style scoped lang="less">
.container {
  background: url("../assets/home-page-bg.png");
  width: 100%;
  min-height: 100vh;
  padding-bottom: 100px;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  color: #fff;
}

.withDraw {
  width: 311px;
  margin: 40px auto 0 auto;
  background: rgba(44, 47, 61, 0.7);
  border-radius: 10px;
  border: 1px solid #9aa7ff;
  min-height: 40px;
  font-size: 12px;
  padding: 40px;
  position: relative;
  .icon-right {
    position: absolute;
    right: 10px;
    cursor: pointer;
  }
  span {
    display: inline-block;
    white-space: nowrap;
  }
}

.title {
  .icon-left {
    position: absolute !important;
    left: 16px;
    top: 8px;
    cursor: pointer;
  }

  font-size: 17px;
  text-align: center;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
}

.qr-code {
  width: 158px;
  height: 158px;
  margin: 54px auto 0 auto;
  border-radius: 10px;
  border: 1px solid #9aa7ff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.text-container {
  font-size: 12px;
  width: 310px;
  margin: 20px auto 0 auto;
  color: #d8d8d8;
  line-height: 20px;
}

.qr-number {
  width: 310px;
  margin: 20px auto 0 auto;
  border: 1px dashed #9aa7ff;
  height: 40px;
  background: rgba(44, 47, 61, 0.7);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 17px;
  font-weight: 500;
  position: relative;
  padding: 0 20px 0 20px;
}
</style>
